<template>
  <div class="aside">
    <div class="box">
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>{{ myCount }}</li>
            <li>{{ myDayCount }}</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>总浏览量</li>
            <li>今日浏览量</li>
          </ul>
        </div>
      </div>
      <div class="panel line">
        <h2>最近30天浏览量</h2>
        <div class="chart"></div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      myCount: 0,
      myDayCount: 0,
      countStep: 5,
      dayCountStep: 5,
      time: 100,
      time2: 100,
      dayList: [],
      numList: [],
    }
  },
  props: ["count", "dayCount", "views"],
  watch: {
    views: function(newVal, oldVal) {
      newVal.forEach((item) => {
        this.dayList.push(item.day)
        this.numList.push(item.number)
      })
      this.lineFn()
    },
    count: function(newVal, oldVal) {
      let timer = setInterval(() => {
        if (this.myCount < newVal) {
          this.countStep += 2
          if (this.myCount + this.countStep > newVal) {
            this.myCount = newVal
          } else {
            this.myCount += this.countStep
          }
        } else {
          this.myCount = newVal
          clearInterval(timer)
        }
        this.time -= 10
        if (this.time < 0) {
          this.time = 0
        }
      }, this.time)
    },
    dayCount: function(newVal, oldVal) {
      let timer2 = setInterval(() => {
        if (this.myDayCount < newVal) {
          this.dayCountStep += 1
          this.myDayCount += this.dayCountStep
          if (this.myDayCount + this.dayCountStep > newVal) {
            this.myDayCount = newVal
          } else {
            this.myDayCount += this.dayCountStep
          }
        } else {
          this.myDayCount = newVal
          clearInterval(timer2)
        }
        this.time2 -= 10
        if (this.time2 < 0) {
          this.time2 = 0
        }
      }, this.time2)
    },
  },
  mounted() {},
  methods: {
    lineFn() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector(".line .chart"))
      // 2. 指定配置和数据
      var option = {
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
          // 通过坐标轴来触发
          trigger: "axis",
        },
        legend: {
          // 距离容器10%
          right: "10%",
          // 修饰图例文字的颜色
          textStyle: {
            color: "#4c9bfd",
          },
          // 如果series 里面设置了name，此时图例组件的data可以省略
          // data: ["邮件营销", "联盟广告"]
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true,
          borderColor: "#012f4a",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.dayList,
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)",
          },
          // 去除x坐标轴的颜色
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          // 去除刻度
          axisTick: {
            show: false,
          },
          // 修饰刻度标签的颜色
          axisLabel: {
            color: "rgba(255,255,255,.7)",
          },
          // 修改y轴分割线的颜色
          splitLine: {
            lineStyle: {
              color: "#012f4a",
            },
          },
        },
        series: [
          {
            name: "浏览量",
            type: "line",
            stack: "总量",
            // 是否让线条圆滑显示
            smooth: true,
            data: this.numList,
          },
        ],
      }
      // 3. 把配置和数据给实例对象
      myChart.setOption(option)
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.aside {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 90%;
}
@font-face {
  font-family: electronicFont;
  src: url(/font/DS-DIGIT.TTF);
}
li {
  list-style: none;
}
.no {
  margin-top: 1.25rem;
  background: rgba(101, 132, 226, 0.1);
  padding: 10px;
  box-sizing: border-box;
}
.no .no-hd {
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid rgba(25, 186, 139, 0.17);
}
.no .no-hd ul {
  display: flex;
}
.no .no-hd ul li {
  position: relative;
  flex: 1;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 1.875rem;
  color: #ffeb7b;
  padding: 0.05rem 0;
  font-family: electronicFont;
  font-weight: bold;
}
.no .no-hd ul li:first-child::after {
  content: "";
  position: absolute;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}
.no .no-bd ul {
  display: flex;
}
.no .no-bd ul li {
  flex: 1;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  padding-top: 0.125rem;
}
.no .no-hd::before {
  content: "";
  position: absolute;
  width: 1.875rem;
  height: 0.625rem;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  top: 0;
  left: 0;
}
.no .no-hd::after {
  content: "";
  position: absolute;
  width: 1.875rem;
  height: 0.625rem;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  right: 0;
  bottom: 0;
}
.panel {
  margin-top: 1.875rem;
  position: relative;
  height: 18.75rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04) url(/images/line.png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }

  h2 {
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    a {
      margin: 0 0.1875rem;
      color: #fff;
      text-decoration: underline;
    }
  }
  .chart {
    height: 14.5rem;
  }
}
</style>
